<script setup>
import {useRoute,useRouter} from 'vue-router'
import {onMounted,ref } from 'vue'
import {findById} from '@/api/admin'
import {findById as findByPositionId} from '@/api/postInfo'


const route =useRoute()
const router =useRouter()
const positionName = ref('') // 新增：存储职位名称

onMounted(async () => {
  const id = route.query.id
  const res = await findById(id)
  adminView.value = res.data
  
  // 获取职位名称
  if (adminView.value.employee?.positionId) {
    fetchPositionName(adminView.value.employee.positionId)
  }
})
// 新增：获取职位名称的方法
const fetchPositionName = async (positionId) => {
  try {
    const res = await findByPositionId(positionId)
    positionName.value = res.data.name // 假设返回的字段是name
  } catch (error) {
    console.error('获取职位信息失败:', error)
    positionName.value = '未知职位'
  }
}
const adminView =ref({})

const handleBack=()=>{
    router.back()
}
</script>

<template>
<div id="app">
    <div class="profile-container">
      <div class="profile-card">
        <div class="profile-header">
          <div class="profile-title">
            <i class="fas fa-user-shield"></i>
            <h1>管理员个人信息</h1>
          </div>
          <div class="admin-id">管理员编号: <span>{{ adminView.adminId }}</span></div>
        </div>
        
        <div class="profile-content">
          <div class="info-grid">
            <div class="info-section">
              <div class="info-header">
                <i class="fas fa-id-card"></i>
                <h2>基本信息</h2>
              </div>
              
              <div class="info-item">
                <div class="info-icon">
                  <i class="fas fa-hashtag"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">管理员编号</div>
                  <span>{{ adminView.adminId }}</span>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-icon">
                  <i class="fas fa-user-tie"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">员工编号</div>
                  <span>{{ adminView.employeeId }}</span>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-icon">
                  <i class="fas fa-phone"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">手机号</div>
                  <span>{{ adminView.employee?.phone}}</span>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-icon">
                  <i class="fas fa-envelope"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">邮箱</div>
                  <span>{{ adminView.employee?.email }}</span>
                </div>
              </div>
            </div>
            
            <div class="info-section">
              <div class="info-header">
                <i class="fas fa-info-circle"></i>
                <h2>个人信息</h2>
              </div>
              
              <div class="info-item">
                <div class="info-icon">
                  <i class="fas fa-signature"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">姓名</div>
                  <span>{{ adminView.employee?.name }}</span>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-icon">
                  <i class="fas fa-briefcase"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">职位</div>
                 <el-icon><Position /></el-icon>
                  <span>{{ positionName || '加载中...' }}</span>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-icon">
                  <i class="fas fa-venus-mars"></i>
                </div>
                <div class="info-content">
                  <div class="info-label">性别</div>
                   <el-icon v-if="adminView.employee?.gender === 1"><Male /></el-icon>
                  <el-icon v-else><Female /></el-icon>
                  <span>{{ adminView.employee?.gender === 1 ? '男' : '女' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="time-section">
            <div class="time-item">
              <div class="time-icon">
                <i class="fas fa-calendar-check"></i>
              </div>
              <div class="time-content">
                <div class="time-label">入职时间</div>
                <div class="info-item">
                <el-icon><Calendar /></el-icon>
                <el-date-picker 
                 v-model="adminView.createTime"
              type="date"
              placeholder="请选择日期"
              format="YYYY-MM-DD" 
               value-format="YYYY-MM-DD"
             readonly />
               </div>
              </div>
            </div>
            
            <div class="time-item">
              <div class="time-icon">
                <i class="fas fa-calendar-edit"></i>
              </div>
              <div class="time-content">
                <div class="time-label">修改时间</div>
                <div class="info-item">
                <el-icon><Calendar /></el-icon>
                <el-date-picker 
                 v-model="adminView.updateTime"
              type="date"
              placeholder="请选择日期"
              format="YYYY-MM-DD" 
               value-format="YYYY-MM-DD"
             readonly />
               </div>
              </div>
            </div>
          </div>
          
          <div class="profile-footer">
            <button class="back-button" @click="handleBack">
              <i class="fas fa-arrow-left"></i> 返回
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }
    
    .app {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    
    .profile-container {
      width: 100%;
      max-width: 1800px;
    }
    
    .profile-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      backdrop-filter: blur(10px);
      animation: fadeInUp 0.8s ease;
    }
    
    .profile-header {
      background: linear-gradient(90deg, #409EFF, #64b5ff);
      padding: 30px;
      color: white;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    
    .profile-header::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -50px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
    }
    
    .profile-header::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -30px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
    }
    
    .profile-title {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-bottom: 15px;
    }
    
    .profile-title i {
      font-size: 36px;
      background: rgba(255, 255, 255, 0.2);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .profile-title h1 {
      font-size: 32px;
      font-weight: 700;
    }
    
    .admin-id {
      font-size: 18px;
      opacity: 0.9;
      position: relative;
      z-index: 2;
    }
    
    .profile-content {
      padding: 40px;
      position: relative;
      z-index: 2;
    }
    
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-bottom: 40px;
    }
    
    .info-section {
      background: #f8fafc;
      border-radius: 16px;
      padding: 25px;
      box-shadow: 0 4px 12px rgba(0, 0, 150, 0.05);
      transition: all 0.3s ease;
    }
    
    .info-section:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 150, 0.1);
    }
    
    .info-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eaeff5;
    }
    
    .info-header i {
      font-size: 22px;
      color: #409EFF;
      background: rgba(64, 158, 255, 0.1);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .info-header h2 {
      font-size: 20px;
      color: #2c3e50;
    }
    
    .info-item {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 18px;
      padding: 8px 0;
    }
    
    .info-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(64, 158, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .info-icon i {
      color: #409EFF;
      font-size: 18px;
    }
    
    .info-content {
      flex: 1;
    }
    
    .info-label {
      font-size: 14px;
      color: #7f8c8d;
      margin-bottom: 3px;
    }
    
    .info-value {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .time-section {
      background: linear-gradient(135deg, #f8fafc 0%, #e6f0ff 100%);
      border-radius: 16px;
      padding: 30px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      box-shadow: 0 4px 12px rgba(0, 0, 150, 0.05);
    }
    
    .time-item {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .time-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background: rgba(64, 158, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .time-icon i {
      color: #409EFF;
      font-size: 22px;
    }
    
    .time-content {
      flex: 1;
    }
    
    .time-label {
      font-size: 16px;
      color: #7f8c8d;
      margin-bottom: 5px;
    }
    
    .time-value {
      font-size: 20px;
      font-weight: 600;
      color: #2c3e50;
    }
    
    .profile-footer {
      text-align: center;
      margin-top: 40px;
      padding-top: 30px;
      border-top: 1px solid #eaeff5;
    }
    
    .back-button {
      height: 50px;
      width: 180px;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 600;
      background: #409EFF;
      color: white;
      border: none;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
    }
    
    .back-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
      background: #64b5ff;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @media (max-width: 768px) {
      .profile-header {
        padding: 20px;
      }
      
      .profile-title h1 {
        font-size: 24px;
      }
      
      .profile-content {
        padding: 20px;
      }
      
      .info-grid {
        grid-template-columns: 1fr;
      }
      
      .time-section {
        grid-template-columns: 1fr;
      }
      
      .back-button {
        width: 100%;
        max-width: 300px;
      }
    }
  </style>